<!-- 条纹柱状图 -->
<template>
  <base-echarts :options="barOptions" />
</template>

<script>
import BaseEcharts from "./BaseEcharts.vue";
import { nowSize } from "@/utils/nowSize";
export default {
  name: "StripeBarChart",
  components: {
    BaseEcharts,
  },
  props: {
    xAxisData: {
      type: Array,
      default: () => [],
    },
    barData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  computed: {
    maxBarValue() {
      const arr = this.barData.sort((a, b) => b - a);
      return +arr[0];
    },
    minBarValue() {
      const arr = this.barData.sort((a, b) => a - b);
      return +arr[0];
    },
    barOptions() {
      return {
        aria: {
          enabled: true,
          decal: {
            show: true,
          },
        },
        animation: true,
        tooltip: {
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            fontSize: nowSize(14),
            color: "#fff",
          },
          formatter: "{b} <br/>{a0} : {c0}万箱",
        },
        grid: {
          left: "5%",
          top: "16%",
          bottom: "10%",
          right: "5%",
          containLabel: true,
        },
        xAxis: {
          data: this.xAxisData,
          axisLine: {
            show: true, // 显示X轴轴线
            lineStyle: {
              color: "#212c38",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 14,
            align: "right",
            fontSize: nowSize(14),
            textStyle: {
              color: "#95b3cc", // X轴文字颜色
            },
          },
        },
        yAxis: {
          name:"万箱",
          type: "value",
          max:this.maxBarValue,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 14,
            fontSize: nowSize(14),
            textStyle: {
              color: "#838688",
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            stack: "总量",
            barWidth: 16,
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#f2f6f9", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#1e638f", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: this.barData.map((item) => ({
              itemStyle: {
                decal: {
                  color: "rgba(19, 38, 57,.8)",
                  dashArrayX: [24, 0],
                  dashArrayY: [3, 4],
                },
              },
              value: item,
            })),
            z: 3,
          },
          {
            name: "",
            type: "bar",
            tooltip: {
              show:false
            },
            barWidth: 50,
            barGap: "-200%",
            itemStyle: {
              normal: {
                color: "rgba(14, 34, 52,0.5)",
              },
            },
            data: this.barData.map((item) => ({
              itemStyle: {
                decal: {
                  dashArrayX: [20, 0],
                  dashArrayY: [5, 2],
                  rotation: -45,
                },
              },
              value: this.maxBarValue+10,
            })),
            z: -1,
          },
        ],
      };
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss"></style>
